<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./static/index.css" />
    <title>各种图形</title>
  </head>
  <body>
    <div class="container">
      <table class="table">
        <tr>
          <th>图形</th>
          <th>实例</th>
        </tr>
        <tr>
          <td>
            <span>圆</span>
          </td>
          <td>
            <div class="banyuan-container">
              <div class="semicircle-top"></div>
              <div class="semicircle-down"></div>
              <div class="semicircle-left"></div>
              <div class="semicircle-right"></div>
              <div class="circle"></div>
            </div>
          </td>
        </tr>

        <tr>
          <td>饼图</td>
          <td>
            <div class="bingtu-container">
              <div class="chartColorful"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>菱形</td>
          <td>
            <div class="lingxing-container">
              <div class="diamond"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>平行四边形</td>
          <td>
            <div class="parallelogram-container">
              <div class="parallelogram"></div>
              <div class="parallelogram2"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            三角形
          </td>
          <td>
            <div class="sanjiaoxing-container">
              <div class="triangle-up"></div>
              <div class="triangle-right"></div>
              <div class="triangle-down"></div>
              <div class="triangle-left"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>四分之一圆</td>
          <td class="sifenzhiyiyuan-container">
            <div class="quarterCircleTop"></div>
            <div class="quarterCircleRight"></div>
            <div class="quarterCircleBottom "></div>
            <div class="quarterCircleLeft "></div>
          </td>
        </tr>
        <tr>
          <td>
            梯形
          </td>
          <td>
            <div class="tixing-container">
              <div class="trapezoid-1"></div>
              <div class="trapezoid-2"></div>
              <div class="trapezoid-3"></div>
              <div class="trapezoid-4"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            椭圆
          </td>
          <td>
            <div class="tuoyuan-container">
              <div class="ovalHor"></div>
              <div class="ovalVert"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>长方形</td>
          <td>
            <div class="changfangxing-container">
              <div class="rectangle"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>正方形</td>
          <td>
            <div class="zhengfangxing-container">
              <div class="square"></div>
              <div class="square2"></div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
